<template>
	<view v-if="cont.courseName" class="container" :style="theme">
		<view class="banner" :style="{backgroundImage: 'url(' + cont.courseImage + ')'}"
			@click="previewImg(cont.courseImage)"></view>
			<!-- #ifdef MP-WEIXIN || MP-QQ -->
		<image v-if="cont.videoNumberId" class="videoImg"
			:src="imgHost + '/banner_ic_play.png'" @click.stop="videoBtn(cont)">
		</image>
		<!-- #endif -->
		<view v-if="cont.secKillInfo && cont.secKillInfo.type == '0'" class="miaosha" :style="{backgroundImage: 'url(' + imgHost + '/miaosha_bgbg.png)'}">
			<view class="left">
				<image :src="imgHost + '/ic_miaosha@2x (1).png'"></image>
				<view class="priceCnt f26 cf">
					<text>秒杀价</text>
					<text>¥</text>
					<text>{{cont.secKillInfo.discountPrice || 0}}</text>
					<text>¥{{cont.price || 0}}</text>
				</view>
			</view>
			<view class="right">
				<view class="cf f24">
					{{cont.secKillInfo.status == '0'?'距活动开始：' :cont.secKillInfo.status == '1'? '距活动结束：':'活动已结束'}}
				</view>
				<u-count-down :time="cont.secKillInfo.duration * 1000" format="DD:HH:mm:ss" autoStart millisecond @change="onChange" @finish="getDetail">
					<view class="time">
						<text v-if="timeData.days && timeData.days > 0" class="time__item">{{ timeData.days }}</text>
						<text v-if="timeData.days && timeData.days > 0" class="jg">天</text>
						<text class="time__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
						<text class="jg">:</text>
						<text class="time__item">{{ timeData.minutes }}</text>
						<text class="jg">:</text>
						<text class="time__item">{{ timeData.seconds }}</text>
					</view>
				</u-count-down>
			</view>
		</view>
		<view v-if="cont.secKillInfo && cont.secKillInfo.type == '1'" class="zhekou"
			:style="{backgroundImage: 'url(' + imgHost + '/bg_zhekou@2x.png)'}">
			<image :src="imgHost + '/ic_hekou@2x.png'" class="left"></image>
			<view class="priceCnt cf">
				<view>
					<text>¥</text>
					<text>{{cont.secKillInfo.discountPrice || 0}}</text>
				</view>
				<view>原价 ¥{{cont.price || 0}}</view>
			</view>
			<view class="right">
				<view class="cf f24">
					{{cont.secKillInfo.status == '0'?'距活动开始：' :cont.secKillInfo.status == '1'? '距活动结束：':'活动已结束'}}
				</view>
				<u-count-down :time="cont.secKillInfo.duration * 1000" format="DD:HH:mm:ss" autoStart millisecond @change="onChange" @finish="getDetail">
					<view class="time">
						<text v-if="timeData.days && timeData.days > 0" class="time__item">{{ timeData.days }}</text>
						<text v-if="timeData.days && timeData.days > 0" class="jg">天</text>
						<text class="time__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
						<text class="jg">:</text>
						<text class="time__item">{{ timeData.minutes }}</text>
						<text class="jg">:</text>
						<text class="time__item">{{ timeData.seconds }}</text>
					</view>
				</u-count-down>
			</view>
		</view>
		<view class="head card" :class="cont.secKillInfo && cont.secKillInfo.type == '0'?'ms':cont.secKillInfo && cont.secKillInfo.type == '1'?'zk':''">
			<view class="head-cont">
				<view class="title" :class="cont.courseType=='1'?'': 'lv'">
					<text>{{cont.courseType=='1'?'团体课':cont.courseType=='4'?'私教课': '长期课'}}</text>
					<view>{{cont.courseName}}</view>
				</view>
				<view class="money">
					<view class="price flex">
						<view v-if="cont.price && cont.price > 0" class="je">¥<text
								class="fwb">{{cont.price}}</text><text
								v-if="cont.price && cont.price > 0 && cont.courseType=='4'" class="f22 c6 ml05">起</text>
						</view>
						<view v-else class="green">免费</view>
						<view class="ks">
							<text>{{cont.courseType=='4'?formatSeconds(cont.duration):cont.classNum?cont.classNum: 0}}</text>{{cont.courseType=='4'?'':'课时'}}
						</view>
						<view v-if="cont.courseType=='4'" class="lx">{{cont.classType == 1?'一对多':'一对一'}}</view>
					</view>
				</view>
				<block v-if="cont.courseType=='4'">
					<view v-if="cont.beginDate" class="info">上课时间：{{cont.beginDate}}</view>
					<view class="info">上课地点：{{cont.site}}</view>
				</block>

				<view v-if="cont.courseType!='4' && cont.introduction" class="info">{{cont.introduction}}</view>
			</view>
		</view>
		<block v-if="shopHome == 1 && cont.venue">
			<view class="shopVenueDetail flex mb2" @click="tzVenDetail(cont.venue)">
				<image :src="cont.venue && cont.venue.logo?cont.venue.logo:imgHost+'/default_changguan.jpg'" class="venImg"></image>
				<view class="venDetail flex flex_between">
					<view class="venDetailLeft">
						<view class="f30 c2 fw5">
							{{cont.venue.venueName}}
						</view>
						<view class="f26 c9" style="margin-top: 2rpx;">
							{{cont.venue.address}}
						</view>
					</view>
					<u-icon name="arrow-right" color="#999999" size="32rpx"></u-icon>
				</view>
			</view>
		</block>
		<block v-if="cont.courseType=='4'">
			<view v-if="cont.teacherInfo && cont.teacherInfo.length> 0" class="card">
				<view class="bt">选择教练</view>
				<scroll-view v-if="cont.teacherInfo && cont.teacherInfo.length > 0" scroll-x class="teacherTab">
					<view v-for="(item, index) in cont.teacherInfo" :key="index" class="li"
						:class="teacherIndex === index?'on':''" @click="teacherIndex = index">
						<image :src="item.teacherImg ? item.teacherImg : imgHost+'/user.png'"></image>
						<view class="name">{{item.teacherName}}</view>
						<view class="lx">{{item.teacherLevel || ''}}</view>
						<view class="num">{{item.bookableCount || 0}}个时间段可约</view>
					</view>
				</scroll-view>
			</view>
			<view v-if="cont.teacherInfo && cont.teacherInfo.length == 1" class="coach" style="padding: 30rpx;">
				<image :src="cont.teacherInfo[0].teacherImg ? cont.teacherInfo[0].teacherImg : imgHost+'/user.png'" />
				<view class="coach-right">
					<view class="name">{{cont.teacherInfo[0].teacherName}}<text
							v-if="cont.teacherInfo[0].teacherLevel">{{cont.teacherInfo[0].teacherLevel}}</text></view>
					<view class="ks"><text>{{cont.teacherInfo[0].bookableCount || 0}}</text>个时间段可约</view>
				</view>
			</view>
		</block>
		<view v-if="cont.courseType!='4'" class="card">
			<view class="bt">课程信息</view>
			<view v-if="cont.teacherInfo && cont.teacherInfo.length == 1" class="coach cg">
				<image :src="cont.teacherInfo[0].teacherImg ? cont.teacherInfo[0].teacherImg : imgHost+'/user.png'" />
				<view class="coach-right">
					<view class="name">{{cont.teacherInfo[0].teacherName}}<text
							v-if="cont.teacherInfo[0].teacherLevel">{{cont.teacherInfo[0].teacherLevel}}</text></view>
					<view class="ks">累计<text>{{cont.teacherInfo[0].allClassTime || 0}}</text>课时</view>
				</view>
			</view>
			<view class="label" v-if="cont.beginDate">
				<view class="label-left">开课日期</view>
				<view class="label-right">{{cont.beginDate}}</view>
			</view>
			<view class="label" v-if="cont.courseEndDate">
				<view class="label-left">结课日期</view>
				<view class="label-right">{{cont.courseEndDate}}</view>
			</view>
			<!-- 	<view class="label">
				<view class="label-left">有效期</view>
				<view class="label-right">
					{{ cont.termNum && cont.termType ?cont.termNum:'' }}{{ cont.termNum && cont.termType && cont.termType == "0" ? '年': cont.termNum && cont.termType && cont.termType == "1" ? '月': cont.termNum && cont.termType && cont.termType == "2" ? '日':'无' }}
				</view>
			</view> -->
			<view class="label" v-if="cont.endTime">
				<view class="label-left">报名截止</view>
				<view class="label-right">{{cont.endTime}}</view>
			</view>
			<!-- <view class="label">
				<view class="label-left">课程类型：</view>
				<view class="label-right">{{cont.courseItem}}</view>
			</view> -->
			<view class="label">
				<view class="label-left">报名人员：</view>
				<view class="label-right"><text
						v-if="cont.numLimit == 2">限{{cont.peopleNumLow}}～{{cont.peopleNumUp}}人</text><text
						v-else>不限制</text>｜已报名<text class="redColor">{{cont.peopleNum}}</text>人</view>
			</view>
			<view class="label">
				<view class="label-left">上课地点：</view>
				<view class="label-right">{{cont.site}}</view>
			</view>
		</view>
		<view class="card">
			<view class="bt">课程详情</view>
			<u-parse :content="cont.des"></u-parse>
		</view>
		<!-- <view v-if="type == 0" class="bottomState flex-cb">
			<view class="f28 cDD5040 flex-cc" @click="jump('/pages/index/index','', 1)">
				<image
					:src="renovationInfo.navigationList && renovationInfo.navigationList.length > 0?renovationInfo.navigationList[0].iconSelected:imgHost+'/nav_home_sel.png'">
				</image>
				<view>首页</view>
			</view>
			<view class="flex-left">
				#ifdef MP 
				<button class='share' open-type="share">分享好友</button>
				#ifdef H5
				<button class='share' open-type="share" @click="shareBtn">分享好友</button>
				<view v-if="cont.status=='2' && cont.courseType!='4'" class="registerNow"
					@click="jump2('/pages/curriculum/signup?id=', id)">
					立即报名</view>
				<view v-if="cont.status=='2' && cont.courseType=='4'" class="registerNow"
					style="padding-left: 62rpx;padding-right: 62rpx;" @click="yyBtn">
					预约</view>
			</view>
		</view> -->
		<view class="box_active_footer">
			<view class="left">
				<view class="hj">
					<text>合计：</text>
					<block>
						<text v-if="cont.secKillInfo && (cont.secKillInfo.surplus == '不限制' || cont.secKillInfo.surplus >0)" class="fh">{{cont.secKillInfo.discountPrice && Number(cont.secKillInfo.discountPrice) >0?'¥':''}}</text>
						<text v-else class="fh">{{cont.price && Number(cont.price) >0?'¥':'' }}</text>
					</block>
					<block>
					  <text v-if="cont.secKillInfo && (cont.secKillInfo.surplus == '不限制' || cont.secKillInfo.surplus >0)" class="price" :class="cont.secKillInfo.discountPrice?'':'green f28i'">{{cont.secKillInfo.discountPrice || '免费' }}</text>
					  <text v-else class="price" :class="cont.price && Number(cont.price) >0?'':'green f28i'">{{cont.price && Number(cont.price) >0?cont.price :'免费' }}</text>
					</block>
				</view>
				<view v-if="cont.secKillInfo && (cont.secKillInfo.surplus == '不限制' ||cont.secKillInfo.surplus >0)" class="yj">
					原价<text :class="cont.price && Number(cont.price) >0?'':'green f28i'">{{cont.price && Number(cont.price) >0?cont.price :'免费' }}</text>
				</view>
			</view>
			<view class="right">
				<view v-if="cont.secKillInfo && cont.status=='2' && cont.courseType!='4' && ((cont.secKillInfo.status == '0')||(cont.secKillInfo.status == '1' && cont.secKillInfo.surplus == 0))" class="yjBtn" @click="jump2('/pages/curriculum/signup?id=', id)"><text>原价报名</text></view>
				<view v-if="cont.secKillInfo && cont.status=='2' && cont.courseType=='4' && ((cont.secKillInfo.status == '0')||(cont.secKillInfo.status == '1' && cont.secKillInfo.surplus == 0))" class="yjBtn" @click="yyBtn(0)"><text>原价预约</text></view>
				<view v-if="cont.secKillInfo && cont.secKillInfo.isNotify == '0' && cont.secKillInfo.status == '0'" class="dyBtn on"  @click="$noMultipleClicks(dyBtn)">
					开抢提醒
				</view>
				<view v-if="cont.secKillInfo && cont.secKillInfo.isNotify == '1' && cont.secKillInfo.status == '0'" class="dyBtn hui">
					已设置提醒
				</view>
				<view v-if="cont.secKillInfo && (cont.secKillInfo.surplus == '不限制' || cont.secKillInfo.surplus > 0) && cont.secKillInfo.status == '1' && cont.status=='2' && cont.courseType!='4'" class="qgBtn" @click="jump2('/pages/curriculum/signup?isJoin=1&id=', id)"><text>立即抢购</text></view>
				<view v-if="cont.secKillInfo && (cont.secKillInfo.surplus == '不限制' || cont.secKillInfo.surplus > 0) && cont.secKillInfo.status == '1' && cont.status=='2' && cont.courseType=='4'" class="qgBtn" @click="yyBtn(1)"><text>立即预约</text></view>
				<view v-if="cont.secKillInfo && cont.secKillInfo.surplus != '不限制' && cont.secKillInfo.status == '1' && cont.secKillInfo.surplus == 0" class="qgBtn hui"><text>抢光了</text></view>
				<view v-if="(!cont.secKillInfo || cont.secKillInfo.status == '2') && cont.status=='2' && cont.courseType!='4'" class="gmBtn"
					@click="jump2('/pages/curriculum/signup?id=', id)">
					立即报名</view>
				<view v-if="(!cont.secKillInfo || cont.secKillInfo.status == '2') && cont.status=='2' && cont.courseType=='4'" class="gmBtn" @click="yyBtn(0)">
					立即预约</view>
			</view>
		</view>
		<u-popup :show="showPops" round custom-style="background: none" mode="top" overlayOpacity="0.7">
			<view class="fxpop popcnt flex-cc">
				<image :src="imgHost+'/ic_tip.png'" class="img1"></image>
				<image :src="imgHost+'/btn_tip.png'" class="img2" @click="showPops = false"></image>
			</view>
		</u-popup>
	</view>
</template>
<script>
	// #ifdef H5
	import wx from '@/common/jweixin.js';
	// #endif
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				noClick: true,
				id: '',
				teacherIndex: 0,
				showPops: false,
				cont: {},
				teacherId: [],
				type: 0,
				time: 108000000,
				timeData: {}
			}
		},
		computed: mapState(["renovationInfo"]),
		onLoad(ops) {
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			this.id = ops.id
			this.type = ops.type || 0
			if (ops.teacherId) {
				this.teacherId = JSON.parse(decodeURIComponent(ops.teacherId))
			}
			if(ops.venueId) {
				this.$store.commit('setVenueId', ops.venueId);
			}
			setTimeout(()=> {
				this.getDetail()
			}, 500)	
		},
		onShareAppMessage(e) {
			let that = this
			if(this.cont && this.cont.secKillInfo && this.cont.secKillInfo.imageUrl) {
				return {
					imageUrl: this.cont.secKillInfo.imageUrl
				}
			} else {
				return {
					title: '课程详情',
					path: `/pages/curriculum/detail?id=${that.id}&type=${that.type}&teacherId=${that.teacherId}&venueId=${that.venueId}`,
				}
			}
		},
		onShareTimeline() {
			let that = this
			if(this.cont && this.cont.secKillInfo && this.cont.secKillInfo.imageUrl) {
				return {
					imageUrl: this.cont.secKillInfo.imageUrl
				}
			} else {
				return {
					title: '课程详情',
					path: `/pages/curriculum/detail?id=${that.id}&type=${that.type}&teacherId=${that.teacherId}`,
				}
			}
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jump3(url, params, a) {
				this.$app.jump3(url, params, a);
			},
			tzVenDetail(item) {
				this.$store.commit('setVenueName', item.venueName);
				this.$store.commit('setVenueId', item.venueId);
				this.jump3('/pages/venue/indexShop?id=', item.venueId)
			},
			dyBtn() {
				this.$app.ajax({
					api: this.$api.addSecNotify(),
					data: {
						param: {
							id: this.cont.secKillInfo.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.$app.showToast('订阅成功')
						this.getDetail()
					}
				}).catch(() => {})
			},
			videoBtn(item) {
				console.log('弹出1次')
				var that = this;
				wx.openChannelsActivity({
					finderUserName: item.videoNumberId,
					feedId: item.videoId,
					success(res) {
						console.log('成功3', res)
					},
					fail(err) {
						console.log('取消3?', err)
					}
				});
				// wx.getChannelsLiveInfo({
				// 	finderUserName: item.videoNumberId,
				// 	success(res) {
				// 		console.log('成功', res)
				// 	},
				// 	fail(err) {
				// 		console.log('取消?', err)
				// 	}
				// });
				// wx.openChannelsLive({
				// 	finderUserName: item.videoNumberId,
				// 	success(res) {
				// 		console.log('成功1', res)
				// 	},
				// 	fail(err) {
				// 		console.log('取消1?', err)
				// 	}
				// });
			},
			submitForm() {
				let that = this
				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
					tmplIds: ['XXXXXXXXXXX'], //这里填写tempid
					success: function(subscribeMessageRes) {
						if (subscribeMessageRes.errMsg ==
							"requestSubscribeMessage:ok") {
							that.dySuccess()
						}
				
					},
					fail: function() {}
				})
				// #endif

			},
			dySuccess() {
				
			},
			onChange(e) {
				this.timeData = e
			},
			formatSeconds(e) {
				return this.$app.formatSeconds(e);
			},
			//单张图片预览
			previewImg(imgurl) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = imgurl
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			yyBtn(isJoin) {
				let classType = this.cont.classType
				let duration = this.cont.duration
				let teacherId = this.cont.teacherInfo[this.teacherIndex].teacherId
				this.jump2('/pages/curriculum/reservation?id=', this.id + '&teacherId=' + teacherId + '&duration=' +
					duration + '&classType=' + classType+ '&isJoin=' + isJoin)
			},
			// 发起获取signature请求
			getSignature() {
				var url = location.href.split('#')[0];
				this.$app.ajax({
					data: {
						param: {
							path: url
						}
					},
					api: this.$api.wxpConfig()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.setShare(res.record)
					}
				}).catch(() => {})
			},
			// 设置分享数据
			setShare(signature) {
				let that = this
				var url = location.href.split('?')[0]
				uni.setStorageSync('signature', JSON.stringify(signature))

				wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					// 配置微信 JSSDK
					appId: signature.appId, // 必填，公众号的唯一标识
					timestamp: signature.timestamp, // 必填，生成签名的时间戳
					nonceStr: signature.nonceStr, // 必填，生成签名的随机串
					signature: signature.signature, // 必填，签名
					jsApiList: ['scanQRCode', 'checkJsApi', 'chooseImage', 'updateAppMessageShareData',
						'updateTimelineShareData'
					]
				})

				wx.ready(function() {
					console.log('这是分享功能')
					wx.updateAppMessageShareData({
						imgUrl: that.cont.courseImage, // 分享图标
						title: that.cont.courseName, // 分享标题
						desc: that.cont.introduction, // 分享描述
						link: url + "?id=" + that.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						success: function() {
							console.log('我来分享了')
						}
					})
					wx.updateTimelineShareData({
						imgUrl: that.cont.courseImage, // 分享图标
						title: that.cont.courseName, // 分享标题
						desc: that.cont.introduction, // 分享描述
						link: url + "?id=" + that.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						success: function() {
							console.log('我来分享了')
						}
					})
				})
				wx.error((res) => {
					console.log(res)
					// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					// that.getSignature()
				})
			},
			//分享
			shareBtn(e) {
				if (e != 1) {
					this.showPops = true
				}
				const _signature = uni.getStorageSync('signature')
				// 先看看缓存里有没有
				if (_signature) {
					let signature = JSON.parse(_signature)
					// 获取当前时间戳
					var now = parseInt(new Date().getTime() / 1000) + ''
					// 计算两个时间戳之间的差值，单位为秒
					var diff = now - signature.expire_time

					// 判断差值是否大于2小时的秒数，即7200秒
					if (diff > 7200) {
						console.log('时间戳已经超过两小时。')
						this.getSignature()
					} else {
						console.log('时间戳未超过两小时。')
						this.setShare(signature)
					}
				} else {
					this.getSignature()
				}
			},
			share() {
				let summary = this.info.introduction
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					title: '课程分享',
					summary: summary, // 分享内容文字
					success: function() {
						// 此处是调起微信分享成功的回调
					},
					fail: function() {
						// 此处是调起微信分享失败的回调
					}
				});
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.infoCourseMini(),
					data: {
						userId: this.userInfo.id,
						param: {
							courseId: this.id,
							// teacherIds: this.teacherId
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						let obj = res.record
						// obj.secKillInfo = {
						// 	"id": 1,
						// 	"type": "0",
						// 	"status": "1",
						// 	"discountPrice": 10,
						// 	"surplus": "不限制",
						// 	"duration": 1866422,
						// 	"isNotify": "1"
						// }
						this.cont = obj
						// this.shareBtn(1)
					} else {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				}).catch(() => {})
			}

		}

	}
</script>
<style scoped lang="scss">
	.container {
		padding-bottom: 120rpx;
	}

	.banner {
		width: 100%;
		height: 388rpx;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.card {
		background-color: #ffff;
		margin-bottom: 24rpx;
		width: 690rpx;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 8rpx;

		.bt {
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			margin-bottom: 30rpx;
		}
	}

	.head {
		margin-top: -30rpx;

		&.ms {
			margin-top: -70rpx;
		}
		.head-cont {
			.title {
				font-size: 36rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				display: flex;
				align-items: center;

				text {
					height: 40rpx;
					line-height: 40rpx;
					background: $color;
					border-radius: 8rpx;
					display: inline-block;
					padding: 0 10rpx;
					margin-right: 20rpx;
					font-size: 22rpx;
					color: #ffff;
				}

			}

			.info {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-top: 15rpx;
				line-height: 1.5;
			}

			.money {
				margin-top: 15rpx;

				.price {
					font-size: 28rpx;

					.je {
						font-size: 36rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: $red;
					}

					.ks {
						font-size: 22rpx;
						color: #666666;
						margin-left: 18rpx;
						padding-left: 18rpx;
						border-left: 1px solid #E5E5E5;
						height: 28rpx;
						line-height: 28rpx;

						text {
							font-size: 30rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #333333;
						}
					}

					.lx {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-left: 18rpx;
						padding-left: 18rpx;
						border-left: 1px solid #E5E5E5;
						height: 28rpx;
						line-height: 28rpx;
					}
				}
			}

		}

	}


	.coach {
		background: #FFFFFF;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding-bottom: 30rpx;
		width: 690rpx;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		margin-bottom: 30rpx;

		&.cg {
			width: 100%;
			border-bottom: 1px solid #EEEEEE;
		}

		image {
			width: 84rpx;
			height: 84rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.coach-right {
			flex: 1;

			.name {
				font-weight: 500;
				color: #222222;
				font-size: 30rpx;
				margin-bottom: 12rpx;
				line-height: 1.5;

				text {
					color: $color;
					font-size: 22rpx;
					line-height: 32rpx;
					padding: 0 10rpx;
					border-radius: 4rpx;
					border: 1px solid $color;
					margin-left: 16rpx;
				}
			}


			.ks {
				font-size: 26rpx;
				line-height: 1.5;
				font-weight: 400;
				color: #999;
			}
		}
	}

	.label {
		display: flex;
		margin-top: 20rpx;
		line-height: 1.5;
		font-size: 28rpx;
		font-weight: 400;
		color: #222222;

		.label-left {
			color: #666666;
			display: inline-block;
			width: 5em;
		}

		.label-right {
			flex: 1;
		}
	}



	.bmry {
		display: flex;
		flex-wrap: wrap;
	}

	.peopleList {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.headPortrait {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.bottomState {
		width: 100%;
		padding: 16rpx 30rpx;
		background-color: #fff;
		position: fixed;
		z-index: 99999;
		bottom: 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.bottomState .flex-cc {
		width: 100rpx;
		flex-direction: column;
	}

	.bottomState .flex-cc image {
		width: 44rpx;
		height: 44rpx;
	}

	.share {
		height: 68rpx;
		padding: 0 34rpx;
		color: $color;
		border: 1px solid $color;
		background-color: #fff;
		font-size: 28rpx;
		border-radius: 34rpx;
		line-height: 68rpx;
	}

	.registerNow {
		height: 68rpx;
		padding: 0 34rpx;
		color: #fff;
		background-color: $color;
		font-size: 28rpx;
		border-radius: 34rpx;
		line-height: 68rpx;
		margin-left: 20rpx;
	}

	.cancel {
		height: 68rpx;
		padding: 0 34rpx;
		color: #666666;
		border: 1px solid #999999;
		font-size: 28rpx;
		border-radius: 34rpx;
		line-height: 68rpx;
	}

	.finishedColor {
		background: #CCCCCC;
	}

	.teacherTab {
		white-space: nowrap;
		display: flex;
		width: 100%;

		.li {
			text-align: center;
			display: inline-block;
			margin-right: 20rpx;
			width: 216rpx;
			height: 266rpx;
			padding-top: 24rpx;
			box-sizing: border-box;
			background: $bjColor;
			border: 1rpx solid $bjColor;
			border-radius: 8rpx;
			position: relative;
			overflow: hidden;

			&:last-of-type {
				margin-right: 0;
			}

			image {
				width: 80rpx;
				height: 80rpx;
				border: 1rpx solid $bjColor;
			}

			view {
				line-height: 1.2;
				margin-top: 8rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
			}

			.name {
				color: #333333;
			}

			.lx {
				font-size: 26rpx;
				color: $color;
			}

			.num {
				color: #999999;
				font-size: 26rpx;
			}

			&.on {
				border-color: $color;
				background: #fff;

				&:before {
					content: '';
					position: absolute;
					right: 0;
					top: 0;
					border: 32rpx solid $color;
					border-bottom-color: transparent;
					border-left-color: transparent;
				}

				&:after {
					content: '';
					width: 5rpx;
					height: 12rpx;
					position: absolute;
					right: 12rpx;
					top: 10rpx;
					border: 2px solid #fff;
					border-top-color: transparent;
					border-left-color: transparent;
					transform: rotate(45deg);
				}
			}

		}
	}

	.miaosha {
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
		width: 100%;
		height: 220rpx;
		box-sizing: border-box;
		padding: 16rpx 30rpx 0 28rpx;
		display: flex;
		justify-content: space-between;

		.left {
			image {
				width: 210rpx;
				height: 50rpx;
				display: block;
			}

			.priceCnt {
				line-height: 50rpx;

				text {
					display: inline-block;

					&:nth-of-type(2) {
						margin-left: 4rpx;
					}

					&:nth-of-type(3) {
						font-size: 48rpx;
						font-weight: bolder;
					}

					&:nth-of-type(4) {
						margin-left: 8rpx;
						text-decoration: line-through;
						color: rgba(255, 222, 222, 1);
					}
				}

			}
		}

		.right {
			text-align: right;
			box-sizing: border-box;
			padding-top: 22rpx;

			.f24 {
				margin-bottom: 10rpx;
			}

			.time {
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #fff;

				text {
					display: inline-block;

					&.jg {
						margin: 0 8rpx;
					}

					&.time__item {
						width: 44rpx;
						height: 44rpx;
						text-align: center;
						line-height: 44rpx;
						background: #fff;
						border-radius: 16rpx;
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: Medium;
						color: #FE2C2E;
					}
				}
			}
		}
	}

	.footCnt {
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
		box-sizing: border-box;
		position: fixed;
		z-index: 99;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		padding: 20rpx 30rpx;

		.left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.hj {
				text {
					color: #FE2C2E;

					&:nth-of-type(1) {
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #333333;
						width: 90rpx;
					}

					&:nth-of-type(2) {
						font-size: 24rpx;
					}

					&:nth-of-type(3) {
						font-weight: bolder;
						font-size: 36rpx;
					}
				}
			}

			.yj {
				padding-left: 90rpx;
				text-decoration: line-through;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.right {
			view {
				&:nth-of-type(2) {
					margin-left: 20rpx;
				}
			}
			.btn {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: Medium;
				color: #FFFFFF;
				width: 200rpx;
				height: 80rpx;
				background: linear-gradient(270deg, #FE2C2E 0%, #FF6A1F 100%);
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
				&.hui {
					opacity: 0.5;
				}
			}
			.btns {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: Medium;
				color: #FFFFFF;
				width: 200rpx;
				height: 80rpx;
				background: #FF6A1F;
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}
	.zhekou {
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
		width: 690rpx;
		height: 160rpx;
		margin: 20rpx auto 0;
		box-sizing: border-box;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
		
		.left {
			width: 68rpx;
			height: 68rpx;
			padding-right: 26rpx;
			flex: none;
			margin-right: 26rpx;
			border-right: 1px solid rgba(255,255,255,0.26);
		}
		.priceCnt {
			flex: 1;
			view {
				line-height: 40rpx;
				text {
					display: inline-block;
					color: #fff;
					&:nth-of-type(1) {
						font-size: 26rpx;
					}
					
					&:nth-of-type(2) {
						font-size: 36rpx;
						font-weight: bolder;
						margin-left: 10rpx;
					}
					
				}
				&:nth-of-type(2) {
					line-height: 30rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					text-decoration: line-through;
					color: #FFDEDE;
				}
			}	
		}
		
		.right {
			text-align: right;
			box-sizing: border-box;
			.f24 {
				margin-bottom: 10rpx;
				line-height: 1;
			}
		
			.time {
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #fff;
		
				text {
					display: inline-block;
		
					&.jg {
						margin: 0 8rpx;
					}
		
					&.time__item {
						width: 44rpx;
						height: 44rpx;
						text-align: center;
						line-height: 44rpx;
						background: #fff;
						border-radius: 16rpx;
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: Medium;
						color: #FE2C2E;
					}
				}
			}
		}
	}
	.videoImg {
		position: absolute;
		width: 60rpx;
		height: 60rpx;
		top: 274rpx;
		right: 24rpx;
	}
	.box_active_footer {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 80rpx;
	
			.hj {
				text {
					color: #FE2C2E;
	
					&:nth-of-type(1) {
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #333333;
						width: 90rpx;
					}
	
					&.fh {
						font-size: 24rpx;
					}
	
					&.price {
						font-weight: bolder;
						font-size: 36rpx;
					}
				}
			}
	
			.yj {
				padding-left: 90rpx;
				text-decoration: line-through;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
	
		.right {
			display: flex;
			justify-content: flex-end;
			flex: 1;
			view {
				margin-left: 20rpx;
			}
			.gmBtn {
				flex: none;
				background: $color;
				color: #fff;
				width: 200rpx;
				height: 80rpx;
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 30rpx;
			}
			
			.qgBtn {
				flex: none;
				background: $color;
				color: #fff;
				width: 200rpx;
				height: 80rpx;
				background: linear-gradient(270deg, #FE2C2E 0%, #FF6A1F 100%);
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 30rpx;
			
				&.hui {
					opacity: 0.5;
				}
			}
			.dyBtn {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: Medium;
				color: #FFFFFF;
				width: 200rpx;
				height: 80rpx;
				background: linear-gradient(270deg, #FE2C2E 0%, #FF6A1F 100%);
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
				&.hui {
					opacity: 0.5;
				}
				&.on {
					-webkit-animation-name: scaleDraw; /*关键帧名称*/
					-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
					-webkit-animation-iteration-count: infinite;  /*动画播放的次数*/
					-webkit-animation-duration: 5s; /*动画所花费的时间*/
				}
			}
			.yjBtn {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: Medium;
				color: #FFFFFF;
				width: 200rpx;
				height: 80rpx;
				background: linear-gradient(270deg, #FEA82C 0%, #FFD34D 100%);
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}
</style>